.link-parent {
  height: 100%;
}
.link-nav {
  background: url("../../assets/images/link.jpg")  no-repeat 50%;
  width: 40%;
  height: 100%;
  float: left;
  background-size: cover;
  position: relative;
  color: white;
}
.link-link {
  width: 60%;
  float: left;
  height: 100%;
  background: #EAE3D5;

}
.link-link-con {
  height: 80%;
  margin: 2rem 2rem 0 2rem;
  border-radius: 1rem;
  background-image: url('../../assets/images/example-bg.jpg');
  background-size: cover;
  position: relative;
}
.link-link .link-animation {
  height: 14rem;
  width: 80%;
  background: rgba(0,0,0,.4);
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
}
.link-link .link-way {
  position: absolute;
  bottom: 5rem;
  width: 100%;
  left: 2rem;
  line-height: 1.5rem;
  font-weight: 800;
}
.link-link .link-way > ul {

}
.link-img {
  position: absolute;
  top: 23%;
  -webkit-transform: translateY(-50%);
  transform: translate(-50%);
  left: 50%;
  width: 12rem;
  height: 12rem;
}

.link-img >img {
  width: 100%;
  height: 100%;
  border-radius: 50% 50%;
}
/*alternate: 反向播放*/
/*infinite： 无限次播放*/
.link-img :hover {
  animation: headrotate 2s linear infinite ;

}
.link-nav-list {
  position: absolute;
  bottom: 22%;
  width: 100%;
  text-align: center;
}

.link-nav-list a:nth-child(1){
  padding-left: 4rem;
  display: block;
  float: left;
}
.link-nav-list a:nth-child(2){
  padding-right: 4rem;
  display: block;
  float: right;
}
.link-nav-list i {
  padding-right: .4rem;
}

.link-love {
  width: 100%;
  height: 4rem;
  position: absolute;
  top: 55%;
  text-align: center;
  font-size: 1.5rem;
}

@media only screen and (max-width: 800px) {
  .link-link {
    display:none;
  }
  .link-nav {
    width: 100%;
    height: 100%;
  }
  .link-nav-list a:nth-child(1){
    padding-left: 6rem;
  }
  .link-nav-list a:nth-child(2){
    padding-right: 6rem;
  }
}

@-webkit-keyframes headrotate {
  0% {
    width: 12rem;
    height: 12rem;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }
  33%{
    width: 12.5rem;
    height: 12.5rem;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }
  66%{
    width: 13rem;
    height: 13rem;
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
  }
  100% {
    width: 12.5rem;
    height: 12.5rem;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
